<template>
	<view class="page-wrapper">
		<div class="content">
			<div class="pay-type">
				<radio-group >
					<div @click="togglePayType(0)">
						<image src="../../../../static/img/public/balance-pay.png" mode="widthFix"></image>
						<span>
							<span>金币抵扣</span>
							<p>({{balance.balance}})</p>
						</span>
						<radio color="#0384FA" :checked="payType === 0" :disabled="isEmpty" />
					</div>
					<div >
						<image src="../../static/img/tabbar/card4.png" mode="widthFix"></image>
						<span>会员卡支付<span v-if="cardData.card_no">(卡号：{{cardData.card_no}})</span></span> 
						<radio color="#0384FA" :checked="payType === 4" @click="cardPay()" />
					</div>
					<div @click="togglePayType(1)">
						<image src="../../../../static/img/public/we-chatpay.png" mode="widthFix"></image>
						<span>微信支付</span>
						<radio color="#0384FA" :checked="payType === 1" />
					</div>
				</radio-group>
			</div>
		</div>
		<div class="footer">
			<span>
				<p>共计</p>
				<span>￥{{order.trade_fee}}</span>
			</span>
			<button @click="submit">
				支付
			</button>
		</div>
		<!-- 选择会员卡弹窗 -->
		<drawer title="会员卡" cancle overlayHide ref="drawer_card">
				<view class="address-list" v-show="cardShow">
					<view v-for="item in cardList" :key="item.id" @click="chooseCard(item)" class='card_item'>
						<div style="display: flex;justify-content: space-between">
							<text>卡号：{{item.card_no}}</text>
							<text>余额：{{item.balance}}</text>
						</div>
						<div style="display: flex;justify-content: space-between" v-if="item.discount_price > 0">
							<text>优惠金额：{{item.discount_price}}</text>
						</div>
					</view>
				</view>
				<div class="exceed-list" v-show="adShow">
					<p>无效会员卡</p>
					<div>
						<div v-for="item in unableCard" :key="item.id" class='card_item' style="background:#ccc">
							<div style="display: flex;justify-content: space-between">	
								<text>卡号：{{item.card_no}}</text>
								<text>余额：{{item.balance}}</text>
							</div>
							<div style="padding-top: 20rpx;margin-top:10px;border-top: 1rpx solid #eee;">不可用原因：{{item.invalid_msg}}</div>
		
						</div>
					</div>
				</div>
				
				<hEmpty v-show="cardList.length== 0"  center="暂无可用会员卡" img="../../static/img/public/address-empty.png"></hEmpty>
		</drawer>
		
	</view>
</template>

<script>
	import {api} from '@/util/api.js';
	
	export default {
		data() {
			return {
				payType: null,
				balance: null,
				order: null,
				isEmpty: false,
				cardList: [],
				unableCard: [],
				cardData: {},
				cardShow: false
			}
		},
		methods: {
			cardPay(){
				this.payType =  4
				this.getCardList()
				this.$refs.drawer_card.open()
				this.cardShow = true
			},
			chooseCard(item){
				this.cardData = {id: item.id , card_no: item.card_no , discount_price: item.discount_price };
				this.$refs.drawer_card.hide();	
			},
			getCardList(){
				api.getOrderCardList({order_id: this.order.order_id} ,res =>{
					 if(res.code == 0){
						 this.cardList = res.data.filter(item => item.is_invalid == 0);
						 this.unableCard = res.data.filter(item => item.is_invalid == 1);
					 }
					
				})
				
			},
			togglePayType(type) {
				switch(type) {
					case 0: 
						if(this.balance.balance > 0) {
							this.payType = 0;
						}
						break;
					case 1: 
						this.payType = 1;
						break;
					default: 
						break;
				}
				
			},
			//获取客户余额
			getBanlance() {
				api.getMemberBanlance({}, res => {
					this.balance = res.data;
					if(this.balance.balance <= 0) {
						this.togglePayType(1);
						this.isEmpty = true;
					} else {
						this.togglePayType(0);
						this.isEmpty = false;
					}
				})
			},
			submit() {
				if(this.payType == 4 && !this.cardData.id){
					uni.showToast({
						title:"请选择会员卡",
						mask: 'true',
						icon: 'none'
					});
					return;
					
				}
				if(this.payType === 0) {
					console.log('余额抵扣支付');
					api.payOrder({
						order_sn: this.order.order_sn,
						able_balance: 1
					}, res => {
						if(res.data.status === 0) {
							this.requestPay(res.data.options, this.order.order_sn);
						} else {
							uni.redirectTo({
								url: '../../../index/paySuccess/paySuccess?sn=' + this.order.order_sn + '&time=' + (new Date()).getTime()/1000 + '&isPay=1&price=' + this.order.trade_fee
							})
						}
					});
				} else if(this.payType === 1) {
					console.log('微信支付');
					api.payOrder({
						order_sn: this.order.order_sn,
					}, res => {
						if(res.data.status === 0) {
							this.requestPay(res.data.options, this.order.order_sn);
						}
					});
				}else if(this.payType === 4){
					api.payCardOrder({order_sn: this.order.order_sn , card_id: this.cardData.id}, res2 => {
						if(res2.data.status == 0) {
							uni.redirectTo({
								url: '../../../index/paySuccess/paySuccess?sn=' + this.order.order_sn + '&time=' + (new Date()).getTime()/1000 + '&isPay=1&price=' + this.order.trade_fee
							})
						}
					});
					
				}
			},
			
			
			// 请求支付 --> 获取结果后 --> 重定向到订单详情页面
			requestPay(res, sn) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: function(e) {
						// 支付成功跳转核销码页面
						uni.redirectTo({
							url: '../../../index/paySuccess/paySuccess?sn=' + sn + '&time=' + res.timeStamp + '&isPay=1&price=' + this.order.trade_fee
						})
					},
					fail: function(e) {
						uni.redirectTo({
							url: '../../../index/paySuccess/paySuccess?sn=' + sn + '&time=' + res.timeStamp + '&isPay=0&price=' + this.order.trade_fee
						})
					}
				});
			
			}
		},
		onLoad(options) {
			this.order = JSON.parse(options.order);
			console.log(this.order)
			this.getBanlance();
		}
	}
</script>

<style scoped>
	.card_active{
		background-color: #999;
	}
	.card_item{
		padding: 30rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
		background: #eeeeee;
		border-radius: 20rpx;
	}
	.page-wrapper {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		
	}
	.content {
		flex-grow: 1;
		width: 100%;
	}
	.pay-type {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		background-color: #ffffff;
	}
	.pay-type div {
		width: 100%;
		display: flex;
		align-items: center;
		height: 108rpx;
	}
	.pay-type div:nth-child(1) {
		border-bottom: 1rpx solid #eee;
	}
	
	
	.pay-type div>image {
		width: 34rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
	}
	.pay-type div>span {
		flex-grow: 1;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.footer {
		flex-shrink: 0;
		width: 100%;
		height: 141rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
		padding: 0 60rpx;
		background-color: #ffffff;
	}
	.footer>span {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer>span>p {
		font-size: 22rpx;
		color: #333333;
	}
	.footer>span>span {
		font-size: 34rpx;
		color: #ff3232;
	}
	.footer>button {
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 426rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
		margin: 0;
	}
	.address-list , .exceed-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
	}
</style>
